<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>首页 - 我的网上书店</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Vue 3 ESM -->
  <script type="module">
    import { createApp, reactive, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

    createApp({
      setup() {
        const search = reactive({ kw: '', drop: false });
        const cart = reactive({ count: 3 });
        const isLogin = !!localStorage.getItem('token');

        const hotKw = ['小王子', '三体', '活着', '1984', '百年孤独'];
        const suggest = computed(() =>
          search.kw ? hotKw.filter(v => v.includes(search.kw)) : []
        );

        function addCart(id) {
          if (!isLogin) {
            const modal = new bootstrap.Modal(document.getElementById('loginModal'));
            modal.show();
            return;
          }
          cart.count += 1;
        }

        return { search, cart, suggest, addCart };
      }
    }).mount('#header-app');
  </script>

  <!-- 内联 CSS：所有样式写在这里 -->
  <style>
    /* ====== 通用 ====== */
    *{margin:0;padding:0;box-sizing:border-box;font-family:Arial,"Microsoft YaHei",sans-serif}
    body{background:#fafafa;color:#333}
    a{text-decoration:none;color:#333}
    ul{list-style:none}

    /* ====== 顶部导航 ====== */
    .navbar{background:#fff;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:1030}
    .navbar .container{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;align-items:center;justify-content:space-between;height:60px}
    .logo{font-size:22px;font-weight:bold;color:#ff6633}
    .nav-group{display:flex;align-items:center;gap:25px}
    .search-box{position:relative;width:260px}
    .search-box input{width:100%;height:36px;padding:0 10px;border:1px solid #ccc;border-radius:4px}
    .search-box ul{position:absolute;left:0;right:0;top:38px;background:#fff;border:1px solid #ddd;border-top:0;max-height:200px;overflow-y:auto;z-index:100}
    .search-box li{padding:8px 10px;cursor:pointer;font-size:14px}
    .search-box li:hover{background:#f2f2f2}
    .cart-link{position:relative}
    .badge{position:absolute;top:-6px;right:-10px;background:#ff6633;color:#fff;font-size:11px;padding:2px 6px;border-radius:10px}

    /* ====== Banner 轮播 ====== */
    .carousel{position:relative;width:100%;height:320px;overflow:hidden}
    .carousel-inner{position:relative;height:100%}
    .carousel-item{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);opacity:0;transition:opacity 1s}
    .carousel-item.active{opacity:1}
    .indicators{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
    .indicators li{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
    .indicators li.active{background:#fff}
    .prev,.next{position:absolute;top:50%;transform:translateY(-50%);font-size:30px;color:#fff;background:rgba(0,0,0,.3);padding:4px 12px;cursor:pointer;border-radius:4px;user-select:none}
    .prev{left:15px}
    .next{right:15px}

    /* ====== 快速入口 ====== */
    .quick-entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:15px;margin:30px 0}
    .quick-entry .item{background:#fff;border:1px solid #e5e5e5;border-radius:6px;text-align:center;padding:25px 15px;transition:transform .25s,box-shadow .25s}
    .quick-entry .item:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
    .quick-entry .item .icon{font-size:36px;margin-bottom:10px}

    /* ====== 商品卡片 ====== */
    .book-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin:20px 0 40px}
    .card{background:#fff;border:1px solid #e5e5e5;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
    .card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
    .card img{height:260px;object-fit:cover}
    .card-body{padding:12px 15px;flex:1;display:flex;flex-direction:column}
    .card-title{font-size:16px;margin-bottom:6px}
    .card-text{font-size:14px;color:#666;margin-bottom:10px}
    .card-footer-btn{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
    .price{color:#ff6633;font-weight:bold;font-size:18px}
    .btn-sm{padding:5px 12px;font-size:14px;border:1px solid #ff6633;background:#fff;color:#ff6633;border-radius:4px;cursor:pointer;transition:background .2s,color .2s}
    .btn-sm:hover{background:#ff6633;color:#fff}

    /* ====== 页脚 ====== */
    footer{background:#fff;border-top:1px solid #e5e5e5;padding:30px 0;text-align:center;font-size:14px;color:#666}
    footer a{color:#666;margin:0 6px}
    footer a:hover{color:#ff6633}

    /* ====== 辅助 ====== */
    .container{max-width:1200px;margin:0 auto;padding:0 15px}
    .text-center{text-align:center}
    .d-flex{display:flex}
    .align-items-center{align-items:center}
    .justify-content-between{justify-content:space-between}
    .border{border:1px solid #e5e5e5}
    .rounded{border-radius:4px}
    .mb-2{margin-bottom:8px}
    .mt-auto{margin-top:auto}
    .my-4{margin:30px 0}
    .my-5{margin:40px 0}
  </style>
</head>

<body>
<!-- ================= 顶部导航 ================= -->
<nav class="navbar" id="header-app">
  <div class="container">
    <a class="logo" href="#">我的书店</a>
    <div class="nav-group">
      <a href="category.html?c=文学">文学</a>
      <a href="category.html?c=科技">科技</a>
      <a href="category.html?c=教材">教材</a>

      <div class="search-box">
        <input type="text" placeholder="搜索书名、作者、ISBN" v-model="search.kw" @focus="search.drop=true" @blur="setTimeout(()=>search.drop=false,150)">
        <ul v-if="search.drop && suggest.length">
          <li v-for="v in suggest" :key="v" @mousedown.prevent @click="search.kw=v;search.drop=false">{{v}}</li>
        </ul>
      </div>

      <a class="cart-link" href="cart.html">
        购物车
        <span class="badge">{{cart.count}}</span>
      </a>
      <a href="login.html">登录</a>
    </div>
  </div>
</nav>

<!-- ================= Banner 轮播 ================= -->
<div class="carousel" id="bannerCarousel">
  <div class="carousel-inner">
    <div class="carousel-item active">Banner 1<br>放 1920×320 图</div>
    <div class="carousel-item">Banner 2<br>新书每满 100-30</div>
    <div class="carousel-item">Banner 3<br>畅销榜 5 折起</div>
  </div>
  <ul class="indicators"><li class="active"></li><li></li><li></li></ul>
  <span class="prev">‹</span><span class="next">›</span>
</div>

<!-- ================= 快速入口 ================= -->
<div class="container my-4">
  <div class="quick-entry">
    <div class="item"><div class="icon">📚</div><h6>满 99 包邮</h6></div>
    <div class="item"><div class="icon">✅</div><h6>正品保证</h6></div>
    <div class="item"><div class="icon">↩️</div><h6>7 天退换</h6></div>
    <div class="item"><div class="icon">☎️</div><h6>全天客服</h6></div>
  </div>
</div>

<!-- ================= 新书速递 ================= -->
<div class="container my-5">
  <h5 class="border-bottom pb-2 mb-3">新书速递</h5>
  <div class="book-row">
    <div class="card">
      <img src="placeholder-封面" alt=""><div class="card-body">
        <h6 class="card-title">小王子</h6>
        <p class="card-text">作者：圣埃克苏佩里</p>
        <div class="card-footer-btn"><span class="price">￥32.8</span><button class="btn-sm" @click="addCart(1)">加购物车</button></div>
      </div>
    </div>
    <div class="card">
      <img src="placeholder-封面" alt=""><div class="card-body">
        <h6 class="card-title">三体</h6>
        <p class="card-text">作者：刘慈欣</p>
        <div class="card-footer-btn"><span class="price">￥59.0</span><button class="btn-sm" @click="addCart(2)">加购物车</button></div>
      </div>
    </div>
    <div class="card">
      <img src="placeholder-封面" alt=""><div class="card-body">
        <h6 class="card-title">活着</h6>
        <p class="card-text">作者：余华</p>
        <div class="card-footer-btn"><span class="price">￥35.0</span><button class="btn-sm" @click="addCart(3)">加购物车</button></div>
      </div>
    </div>
    <div class="card">
      <img src="placeholder-封面" alt=""><div class="card-body">
        <h6 class="card-title">百年孤独</h6>
        <p class="card-text">作者：马尔克斯</p>
        <div class="card-footer-btn"><span class="price">￥55.0</span><button class="btn-sm" @click="addCart(4)">加购物车</button></div>
      </div>
    </div>
  </div>
</div>

<!-- ================= 页脚 ================= -->
<footer><div class="container">© 2025 我的网上书店 | <a href="help.html">帮助中心</a> | <a href="about.html">关于我们</a></div></footer>

<!-- 登录提示模态框（Bootstrap 样式已内联，用原生 JS 打开） -->
<div id="loginModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1050">
  <div style="width:320px;margin:15% auto;background:#fff;border-radius:6px;padding:20px;text-align:center">
    <h6>请先登录</h6>
    <p style="margin:10px 0">登录后即可购买</p>
    <a class="btn-sm" style="width:100%;background:#ff6633;color:#fff" href="login.html">去登录</a>
    <button onclick="document.getElementById('loginModal').style.display='none'" style="margin-top:10px;border:0;background:transparent;color:#666;cursor:pointer">关闭</button>
  </div>
</div>

<script>
/* 轮播简单逻辑（没有 Bootstrap 了） */
const items=document.querySelectorAll('.carousel-item'),inds=document.querySelectorAll('.indicators li');
let cur=0;
function show(idx){
  items.forEach((it,i)=>it.classList.toggle('active',i===idx));
  inds.forEach((it,i)=>it.classList.toggle('active',i===idx));
}
document.querySelector('.next').onclick=()=>{cur=(cur+1)%items.length;show(cur)};
document.querySelector('.prev').onclick=()=>{cur=(cur-1+items.length)%items.length;show(cur)};
</script>
</body>
</html>